Cypress and Typescript E2E Automation Testing |
您所在的位置：网站首页 › cypress page object pattern example › Cypress and Typescript E2E Automation Testing |
Cypress and Typescript E2E Automation Testing
|
Optionally you can delete the examples folder unless you want to keep it as a reference. Note:1. example folder contains example tests, just to play around with some test cases, provided by cypress when you install the cypress package.2. Your tests should be always inside the integration folder. However, you can create subfolders to arrange your specs but they should be inside the integration folder. After the above step, we have created two folders namely specs and page-objects 1. specs folder inside integration folder 2. page-objects folder inside cypress folder Below is the structure CypressTypescript -cypress --integration ---specs --page-objectsNote: Creating a separate folder for page objects and specs helps easy maintenance and managing the automation test. It is just a recommendation not mandatory. Step 10: Create a First Page-Object File Inside the page-objects FolderUsing Visual Studio Code, Create a file named google-search.page.ts . This file should be created inside page-objects folder created in Step 8. Copy and paste the below code inside google-search.page.ts file. TypeScript //Inside your google-search.page.ts file. This is pageobject file. /// export class GoogleSearch{ googleSearch(){ return cy.get('input[name="q"]').first(); } googleSearchBtn(){ return cy.get('input[name="btnK"]').first(); } searchResults(){ return cy.get('h3').first(); } }
Using Visual Studio Code, Create a file named google-search.spec.ts . This file should be created inside spec folder created in Step 9,Copy and paste the below code into the file google-search.spec.ts TypeScript //This is spec file, inside your google-search.spec.ts import { GoogleSearch } from '../../page-objects/google-search.page'; const search = new GoogleSearch(); describe('Google Navigation', () => { it('Google Search',() => { cy.visit('https://www.google.com'); search.googleSearch().type('Something'); search.googleSearchBtn().click({ force: true }); search.searchResults().should('be.visible'); }); });
At this point, your framework should look like below. 
Step 12: Configuring tsconfig.json File
So, You have completed, page-object file, spec file. If you see those files you have created file with a .ts extension, that means we are using typescript in this project. In order for Cypress to understand typescript, we need to configure tsconfig.json file. The tsconfig.json file will be located in the root of the project folder that is inside folder CypressTypescript i. In Step 7 you have already created tsconfig.json file.ii. Navigate to tsconfig.json fileiii. Remove all default settings inside it. (make it empty)iv. Copy and paste the below code { "compilerOptions": { "target": "es5", "lib": ["es5", "dom"], "types": ["cypress"] }, "include": ["**/*.ts"] }
In the VisualStudio Code Terminal, Make sure the terminal present working directory is CypressTypescript. Type below command npx cypress open
Wait for the Cypress window to open. The below window appears.
Now, click on the google.search.spec.ts file in the above window.
BOOM!!! Your test starts running in the browser. Once it gets finished, you will see the result.
To execute cypress tests using the command line. Navigate to the CypressTypescript folder using the command line enter the below command: npx cypress run --spec="./cypress/integration/specs/google-search.spec.ts"
By default, Cypress doesn’t support XPath as a selector, if you need XPath support please install the cypress-xpath npm package: npm i cypress-xpathTo get support for the typescript uses the line /// in your spec file. Below is the example: /// describe('Example', () => { it('Example', () => { //test something }); });
If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi/. |
【本文地址】